<template>
  <div class="anime-text">
    <div class="anime-text-span">一</div>
    <div class="anime-text-span">個</div>
    <div class="anime-text-span">专</div>
    <div class="anime-text-span">注</div>
    <div class="anime-text-span">于</div>
    <div class="anime-text-span">分</div>
    <div class="anime-text-span">享</div>
    <div class="anime-text-span">的</div>
    <div class="anime-text-span">网</div>
    <div class="anime-text-span">站</div>
    <div class="anime-line"></div>
  </div>
</template>
<script>
import anime from "animejs/lib/anime.es.js";
export default {
  name: "animeText",
  data() {
    return {};
  },
  mounted() {
    anime({
      targets: ".anime-text-span",
      translateY: 30,
      delay: anime.stagger(60) // 每个元素的延迟增加100毫秒。
    });
  }
};
</script>
<style lang="scss" scoped>
.anime-text {
  display: flex;
  position: relative;
  width: 40%;
  height: 100px;
  justify-content: center;
  .anime-text-span {
    width: 35px;
    font-size: 30px;
    letter-spacing: 4px;
    color: white;
  }
  .anime-line {
    position: absolute;
    width: 350px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.8);
    bottom: 15px;
  }
}
</style>

// import { Component, Vue } from "vue-property-decorator";
 
// export default Vue.extend({
//   components: {
//     // TableCom
//   },
//   data() {
//     return {
//       msg:'typescript'
//     };
//   },
//   created(){
//     console.log('created',this.msg)
//   },
//   mounted() {
//     console.log('mounted')
//   },
//   computed:{
//     // test: {
//     //   // 需要标注有 `this` 参与运算的返回值类型
//     //   get(): string {
//     //     return this.msg
//     //   },
//     //   set(val: string) {
//     //     this.msg = val
//     //   }
//     // }
//     test(): any {
//       return this.msg
//     }
//   },
//   watch:{
//     msg(val:any){
//       console.log('watch',val)
//     }
//   },
//   methods:{
//     msgBtn(ev:any){
//       this.msg = "点击了typescript"
//       console.log('点击事件',ev)
//     }
//   }
// })
 
// </script>